<template>
  <div class="app">
    <h2>姓名: {{ person2.name }}</h2>
    <h2>年龄: {{ person2.age }}</h2>
    <button @click="person2.age += 1">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { reactive, toRaw, markRaw } from 'vue'

let person = reactive({
  name: 'tony',
  age: 18,
})
// toRaw 用于获取一个响应式对象的原始对象，toRaw返回的对象不再是响应式的，不会触发视图更新。
let person2 = toRaw(person)
// markRaw 标记一个对象，使其永远不会变成响应式的
</script>

<style scoped></style>
